<template>
	<view>
		<navbar title="家政" />
		<view class="h-header relative">
			<image class="absolute" src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/0.png" />
		</view>
		<view class="v-details-card border-box h-operations relative zi2 ">
			<view class=" flex align-item_center" v-for="(item,index) in tabsList" :key="index">
				<view class="item" @click="moreRouter(child)" v-for="(child,chidlIndex) in item" :key="chidlIndex">
					<image class="radius_50" :src="child.picUrl" mode="aspectFill" />
					<view>{{child.name}}</view>
				</view>
			</view>
		</view>

		<serviceVue :list="spuData.list" />
		<u-gap height="110rpx"></u-gap>
		<tabbar :current="0" />
	</view>
</template>

<script setup>
	import navbar from "@/components/navbar.vue"
	import tabbar from "@/components/tabbar.vue"
	import serviceVue from "../components/service.vue";
	import SpuApi from "@/sheep/api/product/spu.js"
	import CategoryApi from "@/sheep/api/product/category.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		navigateTo
	} from "@/utils/tool";
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';

	const parentId = 84; //家政
	onReachBottom(() => {
		// if (spuData.list.length >= spuData.total) return;
		// spuParams.pageNo++;
		// spuPage()
	})

	// 切割数组
	function chunkArray(array, chunkSize = 4) {
		return array.reduce((resultArray, item, index) => {
			const chunkIndex = Math.floor(index / chunkSize);

			if (!resultArray[chunkIndex]) {
				resultArray[chunkIndex] = [];
			}

			resultArray[chunkIndex].push(item);
			return resultArray;
		}, []);
	}

	const spuData = reactive({
		list: [],
		total: 0
	})
	const spuParams = reactive({
		pageNo: 1,
		pageSize: 10,
		categoryId: parentId,
		recommend: true
	})
	const spuPage = () => {
		SpuApi.getSpuPage(spuParams).then(res => {
			spuData.total = res.data.total;
			if (spuParams.pageNo === 1) spuData.list = res.data.list
			else spuData.list = spuData.list.concat(res.data.list)
		})
	}

	const tabsList = ref([])
	const categoryList = () => {
		CategoryApi.getCategoryList(parentId).then(res => {
			if (res.code === 0) {
				tabsList.value = chunkArray(res.data)
				spuPage()
			}
		})
	}

	const moreRouter = (item) => {
		navigateTo(`/homemaking/more/index?id=${item.id}&name=${item.name}`)
	}

	onShow(() => {
		categoryList()
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.h-operations {
		padding: 18rpx 40rpx 42rpx;
		margin: 0rpx auto 0;

		.item:not(:first-child) {
			margin-left: 104rpx;
		}

		.item {
			margin-top: 30rpx;
			text-align: center;
			width: 80rpx;
			padding-bottom: 46rpx;
			position: relative;

			view {
				position: absolute;
				left: 50%;
				bottom: 0rpx;
				transform: translateX(-50%);
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(64, 3, 3, 1);
				margin-top: 10rpx;
				white-space: nowrap;
			}

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.h-header {
		height: 314rpx;

		image {
			right: 42rpx;
			bottom: -66rpx;
			width: 668rpx;
			height: 334rpx;
		}
	}
</style>